<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="top">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>读者规则</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 表格区域 -->
      <el-table
        :data="data"
        height="350"
        style="width: 100%; font-size: 14px"
        v-loading="loading"
        show-overflow-tooltip
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        id="pdfDom"
        :default-sort="{ prop: 'bookNumber', order: 'ascending' }"
      >
        <el-table-column prop="ruleID" label="规则编号" sortable width="130"></el-table-column>
        <el-table-column prop="bookDays" label="规则日期"></el-table-column>
        <el-table-column prop="bookLimitNumber" label="借阅数量限制"></el-table-column>
        <el-table-column prop="bookRuleID" label="书籍规则ID"></el-table-column>
        <el-table-column prop="bookLimitLibrary" label="图书馆"></el-table-column>
        <el-table-column prop="bookOverdueFee" label="超时收费" sortable></el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
        <el-table-column prop="updateTime" label="借阅时间"></el-table-column>
      </el-table>
      <!-- 分页查询区域 -->
      <el-pagination
        @size-change.sync="handleSizeChange"
        @current-change.sync="handleCurrentChange"
        :current-page.sync="queryInfo.pageNum"
        :page-size.sync="queryInfo.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";

import { getUserRule } from "../../api/api";
let data = ref();
let total = ref(0);
const queryInfo = reactive({
  //当前页
  pageNum: 1,
  //每页显示个数选择器
  pageSize: 6,
  //具体条件
});
let loading = ref(true);
onMounted(() => {
  getRule();
});
//切换每页显示几个
const handleSizeChange = val => {
  queryInfo.pageSize = val;
  getRule();
};
//切换页码
const handleCurrentChange = val => {
  queryInfo.pageNum = val;
  getRule();
};

//请求表格数据
const getRule = () => {
  getUserRule()
    .then(res => {
      data.value = res.data.records;
      total.value = res.data.total;
      console.log(data, "111");
      ElMessage({
        message: "获取信息成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取信息失败");
    });
  loading.value = false;
};
</script>

<style>
.top {
  margin-bottom: 8px;
}
.card {
  display: flex;
  justify-content: space-around;
}
</style>
